<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/buy.css">
    <script src="jquery.js"></script>
    
</head>
<body>
    <header>
        <div class="hdTopbox">
            <a href="main.html"><img src="images/logo.jpg" class="logoImg"></a>            
            <input type="text" id="searchTxt" class="searchTxt fl">
            <button class="searchBtn fl">搜索</button>
            <img src="images/广告.jpg" class="guanggaoimg">
        </div>
        <div class="hdButtombox">
            <div class="allBox fl">
                <span>全部商品分类</span>
            </div>
            <div class="secBox1 fl">
                <a href="#" class="secn">我的亚马逊</a>
            </div>

            <div class="secBox fl">
                <a href="#" class="secn">海外购</a>
            </div>

            <div class="secBox fl">
                <a href="#" class="secn">Kindle电子书</a>
            </div>

            <div class="secBox fl">
                <a href="#" class="secn">镇店之宝</a>
            </div>

            <div class="secBox fl">
                <a href="#" class="secn">全球开店</a>
            </div>

            <div class="secBox fl">
                <a href="#" class="secn">客户服务</a>
            </div>

            <div class="gwcBox fr">
                <a href="cart.html"><span>购物车</span></a>
            </div>

            <div class="loginBox fr">
                <a href="register.html"><span>登录</span></a>
            </div>

        </div>
    </header>

    <section>
        <div class="tabBox">
            <a href="#" class="tbA current">电脑</a>
            <a href="#" class="tbA ">品牌</a>
            <a href="#" class="tbA ">排行榜</a>
            <a href="#" class="tbA ">笔记本</a>
            <a href="#" class="tbA ">游戏本</a>
            <a href="#" class="tbA ">超极本</a>
            <a href="#" class="tbA ">平板电脑</a>
            <a href="#" class="tbA ">台式机</a>
            <a href="#" class="tbA ">一体机</a>
            <a href="#" class="tbA ">路由器</a>
            <a href="#" class="tbA ">存储卡</a>
            <a href="#" class="tbA ">优盘</a>
            <a href="#" class="tbA ">固态硬盘</a>
            <a href="#" class="tbA ">移动硬盘</a>
            <a href="#" class="tbA ">鼠标键盘</a>
            <a href="#" class="tbA ">笔记本配件</a>
            <a href="#" class="tbA ">平板配件</a>
        </div>

        <div class="ylqu">
            <div id="smallImg"
                style="width: 500px; height: 500px; background: url(images/放大镜图片.jpg) center; background-size: cover; position: absolute; left: 100px; top: 200px;">
                <div id="smallArea"
                    style="display: none; width: 80px; height: 80px; background: rgba(200, 250, 200, 0.4); position: absolute; left: 40px; top: 0;">
                </div>
            </div>

            <div id="bigArea"
                style="display: none; overflow: hidden; width: 500px; height: 500px; background: rgba(200, 200, 250, 0.5); position: absolute; left: 700px; top: 200px;">
                <img id="bigImg" src="images/放大镜图片.jpg"
                    style="width:800px; height:800px; position: absolute; left: 0; top: 0;" />
            </div>
            <div class="rgbox fr">
                <img src="images/商品描述.jpg" alt="" class="goodsmsg">
                <div class="buybox buybtn" >
                    <a href="javascript:void(0)" class="add" data-id="1">加入购物车</a>
                    
                </div>
            </div>
        </div>
        <div class="fgbox"></div>

        <div class="Titlebox">
            <span>产品信息</span>
        </div>


        <div class="msgBox">
            <span class="Lv2Title fl">技术细节</span>
            <span class="Lv2Title fl">更多信息</span>
            <div class="listBox1 fl">
                <div class="lb1">
                    <span>包装尺寸</span>
                </div>
                <div class="lb1">
                    <span>包装清单</span>
                </div>
                <div class="lb1">
                    <span>制造商</span>
                </div>
                <div class="lb1">
                    <span>型号</span>
                </div>
                <div class="lb1">
                    <span>保修说明</span>
                </div>
                <div class="lb2">
                    <span>商品重量</span>
                </div>

            </div>
            <div class="listBox2 fl">
                <div class="lb1">
                    <span>	‎90 x 40 x 24 cm; 1.2 公斤</span>
                </div>
                <div class="lb1">
                    <span>	‎Quick guide</span>
                </div>
                <div class="lb1">
                    <span>	‎Gigabyte</span>
                </div>
                <div class="lb1">
                    <span>	‎GV-N306TGAMING OC-8GD R2.0</span>
                </div>
                <div class="lb1">
                    <span>	‎代理店保証 2年間</span>
                </div>
                <div class="lb2">
                    <span>	‎1.2 kilograms</span>
                </div>
            </div>

            <div class="listBox3 fl">
                <div class="lb1">
                    <span>ASIN</span>
                </div>
                <div class="lb3">
                    <span>亚马逊热销商品排名</span>
                </div>
                <div class="lb2">
                    <span>Amazon.cn上架时间</span>
                </div>
            </div>
            <div class="listBox4 fl">
                <div class="lb1">
                    <span>	B09G71BBSX</span>
                </div>
                <div class="lb3">
                    <span>商品里排第9名电子产品 (查看商品销售排行榜电
                        <br>　子产品)商品里排第3名显卡</span>
                </div>
                <div class="lb2">
                    <span>	2021年9月20日</span>
                </div>
            </div>

        </div>
        <div class="fgbox"></div>
        <div class="Titlebox">
            <span>商品描述</span>
        </div>
        <span class="ms">【芯片】NVIDIA /RTX3060Ti<br>
            【内存】GDDR6 8GB (256bit存储总线)<br>
            【核心频率】 Boost Clock 1,740MHz<br>
            【显存频率】 14Gbps<br>
            【I/F】 PCI-E 4.0 x16<br>
            【输出】 DisplayPort x2、HDMI x2<br>
            【对应】DirectX 12<br>
            【FAN】空冷风扇 (WINDFORCE 3X)<br>
            辅助电源:8pin×1。<br>
            【板尺寸】282 x 117 x 41 mm
            <br>
            <br>
        </span>
        <div class="fgbox"></div>
    </section>
    <script src="gouwu.js"></script>



    <footer>
        <div class="ftTopbox">
            <div class="ftTopmsg fl">
                <span class="tit1">了解我们</span>
                <a href="#" class="ftAbig">人才招聘</a>
                <a href="#" class="ftAbig">关于亚马逊</a>
                <a href="#" class="ftAbig">新闻中心</a>
            </div>
    
            <div class="ftTopmsg fl">
                <span class="tit1">合作信息</span>
                <a href="#" class="ftAbig">我要开店</a>
                <a href="#" class="ftAbig">加入联盟</a>
                <a href="#" class="ftAbig">合作伙伴</a>
            </div>
    
            <div class="ftTopmsg fl">
                <span class="tit1">帮助中心和购物指南</span>
                <a href="#" class="ftAbig">付款与退款</a>
                <a href="#" class="ftAbig">汇款单招领</a>
                <a href="#" class="ftAbig">发货与配送</a>
                <a href="#" class="ftAbig">退货与换货</a>
                <a href="#" class="ftAbig">帮助中心</a>
            </div>
        </div>
        
        <div class="ftlogobox">
            <img src="./images/navAmazonLogoFooter._CB485935925_.jpg" alt="">
        </div>
        <span class="ance">美国/地区|加拿大|巴西|墨西哥|英国/地区|法国/地区|意大利|西班牙|德国/地区|日本|印度|亚马逊家族网站:Shopbop</span>
        <span class="ance">使用条件 隐私声明 版权所有 © 1996-2021，亚马逊公司或其关联公司</span>
        <span class="ance">互联网药品信息服务资格证书 (京)-非经营性-2012-0005</span>
        <span class="ance">京公网安备11010502030232号 增值电信业务经营许可证：合字 B2-20090004营业执照：91110000717883277U</span>
        <span class="ance">京ICP备11014788号出版物经营许可证</span>
    </footer>



    <script>

        // 核心公式

        // 小图/大图=小区域/大区域
        //小区域=(小图/大图)*大区域

        //核心比例
        // 大区域/小区域
        // 


        $(window).on("load", function () {
            $("#smallArea").css({
                width: $("#smallImg").width() / $("#bigImg").width() * $("#bigArea").width(),
                height: $("#smallImg").height() / $("#bigImg").height() * $("#bigArea").height()
            })

            let oRate = $("#bigArea").width() / $("#smallArea").width();

            $("#smallImg").on("mouseenter", () => {
                $("#bigArea").show();
                $("#smallArea").show();
            }).on("mouseleave", () => {
                $("#bigArea").hide();
                $("#smallArea").hide();
            })

            $("#smallImg").on("mousemove", (e) => {
                var mx = e.pageX - $("#smallImg").offset().left - $("#smallArea").width() / 2;
                var my = e.pageY - $("#smallImg").offset().top - $("#smallArea").height() / 2;
                if (mx < 0) {
                    mx = 0;
                }
                if (my < 0) {
                    my = 0;
                }
                if (mx >= $("#smallImg").width() - $("#smallArea").width()) {
                    mx = $("#smallImg").width() - $("#smallArea").width();
                }
                if (my >= $("#smallImg").height() - $("#smallArea").height()) {
                    my = $("#smallImg").height() - $("#smallArea").height();
                }
                $("#smallArea").css({
                    left: mx,
                    top: my
                })

                $("#bigImg").css({
                    left: mx * -oRate,
                    top: my * -oRate
                })
            })
        })
    </script>
</body>
</html>